<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8" >
    <title>首页</title>
    <link rel="stylesheet"  href="../../static/layui/css/layui.css" data-th-href="@{/layui/css/layui.css}">
    <script src="../../static/layui/layui.js" data-th-src="@{/layui/layui.js}"></script>
    <style>
        .layui-breadcrumb{
            line-height: 30px;
        }
    </style>
</head>
<body>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon layui-icon-add-1"></i>新增账号</button>
        <button class="layui-btn layui-btn-sm" lay-event="del"><i class="layui-icon layui-icon-delete"></i>批量删除</button>
    </div>

</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="role"><i class="layui-icon layui-icon-add-1"></i>绑定角色</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i> 删除</a>
</script>
<div class="layui-fluid">
    <div class="layui-row">
        <div class="layui-clo-md12">
            <span class="layui-breadcrumb">
                  <a data-th-href="@{/}" >首页</a>
                  <a href="javascript:;">权限管理</a>
                  <a><cite>账号管理</cite></a>
                </span>
        </div>
    </div>
    <div class="layui-row">
        <div class="layui-col-md12">
            <form class="layui-form">
                <div class="layui-inline">
                    <label class="layui-form-label">账号：</label>
                    <div class="layui-input-inline">
                        <input type="text" name="account" placeholder="请输入账号" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <div class="layui-input-inline">
                        <button class="layui-btn" lay-submit lay-filter="query">
                            <i class="layui-icon layui-icon-search"> </i>
                        </button>
                    </div>
                </div>
                <!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
            </form>
        </div>
    </div>
    <div class="layui-row">
        <div class="layui-col-md12">
            <table class="layui-hide" id="table_data" lay-filter="table_filter"></table>
        </div>
    </div>
</div>





<script data-th-inline="javascript">
    layui.use(["table","layer","jquery","element","form"],function(){
        let {table,layer,$,form} = layui;
        table.render({
            id:'table_reload',
            elem:'#table_data',
            url:/*[[@{/account}]]*/'/data/account.json',
            cellMinWidth: 80,
            toolbar:'#toolbarDemo',
            page:true,
            cols:[
                [
                    { fixed:'left',width:80, title: 'ID',type:'checkbox'}
                    ,{field:'id', width:80, title: 'ID', sort: true}
                    ,{field:'account', width:80, title: '账号'}
                    ,{field:'password', width:150,title: '密码'}
                    ,{field:'root',title: '权限'}
                    ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:250}
                ]
            ]
        });
        //监听查询操作
        form.on("submit(query)",function (e) {
            //重载表格
            table.reload("table_reload",{
                where:e.field
            })
            return false;
        })


        table.on('toolbar(table_filter)', function(obj){

            if(obj.event == 'add'){
                layer.open({
                    type: 2,
                    area: ['450px', '400px'],
                    fixed: false, //不固定
                    maxmin: false,
                    content: /*[[@{/account/edit}]]*/'test/iframe.html'
                })
            }else if(obj.event=='del'){
              let status =  table.checkStatus('table_reload');
              status.data;
              if(status.data.length == 0){
                  layer.msg("请选择需要删除的账号！");
              }else {
                  let accountList = status.data.map(d=>d.account).join(",");
                  let ids = status.data.map(d=>'id='+d.id).join("&");
                  del(`确认是否删除账号:[${accountList}]?`,ids);
              }
            }
        });
        table.on("tool(table_filter)",function (e) {
            switch (e.event) {
                case "authorization":
                    layer.open({
                        type: 2,
                        area: ['360px', '300px'],
                        fixed: false, //不固定
                        maxmin: false,
                        content: '[(@{/account/authorization})]/'+e.data.id
                    });
                    break;
                case "edit":
                    layer.open({
                        type: 2,
                        area: ['450px', '350px'],
                        fixed: false, //不固定
                        maxmin: false,
                        content: '[(@{/account/edit})]/'+e.data.id
                    });
                    break;
                case "del" :
                    del(`确认是否删除账号:[${e.data.account}]?`,`id=${e.data.id}`);

            }

        });
        function del(message,parameter) {
            layer.confirm(message,{icon: 3, title:'提示'},function () {
                let index = layer.load(3,{shade:0.3});
                $.ajax({
                    type:'delete',
                    url:'[(@{/account})]?'+parameter,
                    dataType:'json',
                    success:function (rs) {
                        layer.close(index);
                        if(rs.code==0){
                            table.reload('table_reload');
                            layer.msg(rs.msg,{icon:6,title:"温馨提示"});
                        }else {
                            layer.msg(rs.msg,{icon:5,title:"温馨提示"});
                        }
                    }
                });
            });
        }
    })
</script>
</body>
</html>